<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.box{
			padding-top: 50px;
			width: 800px;
			margin:auto;
		}
		.btn{
			margin-top: 70px;
			width: 64px;
			height: 64px;
			padding:50px;
			float: left;
		}
		#img{
			float: left;
			width: 300px;
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="btn"><img  onmouseover="mouseOver()"  onmouseout="mouseOut()"  onclick="left()" src="imgs/left.png" /></div>
		<img id="img" src="imgs/1.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" />
		<div class="btn"><img  onmouseover="mouseOver()"  onmouseout="mouseOut()"  onclick="right()" src="imgs/right.png" /></div>
	</div>
	<script type="text/javascript">
		var arr = ["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg","imgs/4.jpg","imgs/5.jpg","imgs/6.jpg"];
		var index = 0;
		var img = document.getElementById("img");
		// 左按钮
		function left(){
			if( index == 0){
				index = arr.length;
			}
			img.src=arr[--index];
		}
		// 右按钮
		function right(){
			if( index == arr.length-1){
				index = -1;
			}
			img.src=arr[++index];
		}
		
		var time;
		

		// 鼠标放上去时结束自动切换
		function mouseOver(){
			clearInterval(time);
		}

		// 鼠标移出后自动切换
		function mouseOut(){
			time = setInterval(right,1000);
		}

		mouseOut();
	</script>
</body>
</html>